﻿<!DOCTYPE html>
<html>
<head>
    <title>sss</title>
    <link href="Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" />
    <link href="Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/kendo/2013.1.319/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="stock-chart"></div>
        </div>
        <script>
            function createChart() {
                $("#stock-chart").kendoStockChart({
                    dataSource: {
                        transport: {
                            read: {
                                url: "http://demos.kendoui.com/content/dataviz/js/boeing-stock.json",
                                dataType: "json"
                            }
                        }
                    },
                    title: {
                        text: "The Boeing Company (NYSE:BA)"
                    },
                    dateField: "Date",
                    panes: [{
                        title: "Value"
                    }, {
                        name: "volumePane",
                        title: "Volume",
                        height: 150 // pixels
                    }],
                    categoryAxis: {
                        pane: "volumePane"
                    },
                    valueAxes: [{
                        // Default axis
                        line: {
                            visible: false
                        }
                    }, {
                        name: "volumeAxis",
                        pane: "volumePane",
                        visible: false
                    }],
                    series: [{
                        type: "candlestick",
                        openField: "Open",
                        highField: "High",
                        lowField: "Low",
                        closeField: "Close"

                    }, {
                        type: "column",
                        field: "Volume",
                        axis: "volumeAxis",
                        tooltip: {
                            format: "{0:C0}"
                        }
                    }],
                    navigator: {
                        series: {
                            type: "area",
                            field: "Close"
                        },
                        select: {
                            from: "2009/02/05",
                            to: "2011/10/07"
                        }
                    }
                });
            }

            $(document).ready(function () {
                setTimeout(function () {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();

                    $("#example").bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
        <style scoped>
            .chart-wrapper, .chart-wrapper .k-chart {
                height: 500px;
            }
        </style>
    </div>
</body>
</html>
